// const React from "react";
const {BrowserRouter, HashRouter, Router, Switch, Route, Link, useRouteMatch} = ReactRouterDOM;

// This example show how you could create a custom
// <Link> that renders something special when the URL
// is the same as the one the <Link> points to.

class CustomLinkExample extends React.Component {
    componentWillReceiveProps(nextProps) {
        console.log("刷新页面!", nextProps)
    }
    render() { 
        return (
            <HashRouter>
                <div className="nav">
                    <div className="horizontal-nav">
                        <OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="主页" />
                        <OldSchoolMenuLink to="/message" label="消息" />
                        <OldSchoolMenuLink to="/about" label="关于" />
                    </div>

                    <Switch>
                        <Route exact path="/">
                            <Home />
                        </Route>
                        <Route path="/message">
                            <Message />
                        </Route>
                        <Route path="/about">
                            <About />
                        </Route>
                    </Switch>
                </div>
            </HashRouter>
        );
    }
}

/**
 * 切换tab改变路由
 * @param label
 * @param to
 * @param activeOnlyWhenExact
 * @returns {*}
 * @constructor
 */
function OldSchoolMenuLink({ label, to, activeOnlyWhenExact }) {
    let match = useRouteMatch({
        path: to,
        exact: activeOnlyWhenExact
    });
    console.log("match:",match)
    return (
        <div className={match ? "horizontal-nav-item active" : "horizontal-nav-item"}>
            <Link to={to}>{label}</Link>
        </div>
    );
}

/**
 * 受控组件
 */
class Home extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            username:"",
            password:""
        }
    }

    handleUserName = (ev) =>{
        this.setState({
            username:ev.target.value
        })
    }

    handlePassWord = (ev) => {
        this.setState({
            password:ev.target.value
        })
    }

    submitLogin = () =>{
         console.log("this.state",this.state)
    }
    render(){
        return(
            <div className="form-container">
                <h2 className="title">reactHTML表单元素：受控组件示例</h2>
                <form className="form">
                    <div className="legend">
                        <h4 class="title">表单登录</h4>
                    </div>
                    <div className="legend">
                        <label for="username">用户名：</label>
                        <input id="username" type="text" value={this.state.username} placeholder="用户名" onChange={ this.handleUserName }/>
                    </div>
                    <div className="legend">
                        <label htmlFor="username">密&emsp;码：</label>
                        <input id="password" type="password" value={this.state.password} placeholder="密&emsp;码" onChange={ this.handlePassWord }/>
                    </div>
                    <div className="legend">
                        <div className="btn btn-edit" onClick={ this.submitLogin }>登录</div>
                    </div>
                </form>
            </div>
        )
    }

}

/**
 * fetch使用示例：
 */
class About extends React.Component {

    constructor(){
        super()
        this.state = {
            list:[]
        }
    }
    componentDidMount(){
        const url = "./json/data.json"
        fetch(url).then(res =>{
            console.log("res:",res)
            return res.json()
        }).then(data =>{
            console.log("data:",data)
            const { data: { list } } = data
            this.setState({
                list:list
            })
        }).catch(error =>{
            console.log("error:",error)
        })
    }

    render() {
        return (
            <div className="about-container">
                <h2 className="title">fetch使用示例：</h2>
                <div className="list">
                    {
                        this.state.list.map(item => {
                            return (
                                   <div className="item" id={item.id}>
                                      <span className="name">姓名：{ item.name }</span>
                                      <span className="age">年龄：{ item.age }</span>
                                      <span className="gender">性别：{ item.gender }</span>
                                  </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

/**
 * 非受控组件
 */
class Message extends React.Component{

    constructor(){
        super()
        this.state = {}
        this.refDom = React.createRef()
    }

    componentWillMount(){
        console.log("componentWillMount ======= this.refDom",this.refDom)
    }
    componentDidMount(){
        console.log("componentDidMount ======  this.refDom",this.refDom)
    }

    submitLogin = () => {
        console.log("submitLogin ======  this.refDom",this.refDom)
        console.log("submitLogin ======  this.refDom.current",this.refDom.current)
    }

    render(){
        return(
            <div className="message-container" ref={ this.refDom }>
                <h2 className="title">非受控组件示例：</h2>
                <form className="form">
                    <div className="legend">
                        <h4 className="title">表单登录</h4>
                    </div>
                    <div className="legend">
                        <label htmlFor="username">用户名：</label>
                        <input id="username" type="text"  placeholder="用户名"/>
                    </div>
                    <div className="legend">
                        <label htmlFor="username">密&emsp;码：</label>
                        <input id="password" type="password" placeholder="密&emsp;码"/>
                    </div>
                    <div className="legend">
                        <div className="btn btn-edit" onClick={this.submitLogin}>登录</div>
                    </div>
                </form>
            </div>
        )
    }
}